<template>
  <div>
    <div class="bacteria-title" :data-font="$i18n.locale">
      {{ $t("application.bacteria.title") }}
    </div>
    <div class="bacteria-rules">
      <p :data-font="$i18n.locale">
        {{ $t("application.bacteria.p1") }} <br /><br />
      </p>
      <p :data-font="$i18n.locale">
        {{ $t("application.bacteria.p2") }} <br /><br />
      </p>
      <p :data-font="$i18n.locale">{{ $t("application.bacteria.p3") }}</p>
      <div class="demo">
        <el-image
          class="image"
          :src="require('@/assets/img/application/bacteria1.png')"
        ></el-image>
        <div class="process">
          <span :data-font="$i18n.locale">{{
            $t("application.bacteria.p4")
          }}</span>
          <el-image
            class="icon-right"
            :src="require('@/assets/img/application/icon-right.png')"
          ></el-image>
        </div>
        <el-image
          class="image"
          :src="require('@/assets/img/application/bacteria2.png')"
        ></el-image>
        <div class="process">
          <span :data-font="$i18n.locale">{{
            $t("application.bacteria.p5")
          }}</span>
          <el-image
            class="icon-right"
            :src="require('@/assets/img/application/icon-right.png')"
          ></el-image>
        </div>
        <div class="succ-image">
          <el-image
            :src="require('@/assets/img/application/bacteria3.png')"
          ></el-image>
          <div class="img-title" :data-font="$i18n.locale">
            {{ $t("application.bacteria.p6") }}
          </div>
        </div>
      </div>
    </div>
    <div class="messages">
      <p :data-font="$i18n.locale">{{ $t("application.bacteria.message") }}</p>
    </div>
    <!-- 底部报名按钮 -->
    <div class="application-btns">
      <el-button
        :data-font="$i18n.locale"
        class="application-btn"
        @click="addRegistrationForm"
        >{{ $t("application.bacteria.btn") }}</el-button
      >
    </div>
  </div>
</template>

<!-- 细菌博弈 -->

<script>
export default {
  methods: {
    addRegistrationForm() {
      this.$router.push("/application/registrationForm/bacteria");
    },
  },
};
</script>

<style lang="less" scoped>
.bacteria-title {
  font-size: 1.17rem;
  font-weight: bold;
  color: #212121;
  line-height: 1.92rem;
  margin-bottom: 0.32rem;
}

.bacteria-title[data-font="zh"] {
  font-family: "AlibabaPuHuiTi-Bold", "AlibabaPuHuiTi";
}

.bacteria-title[data-font="en"] {
  font-family: "RNSSanzSC-Bold, RNSSanzSC";
}

.bacteria-rules {
  width: 32rem;

  p[data-font="zh"] {
    font-size: 0.53rem;
    font-weight: normal;
    color: #68656c;
    line-height: 0.85rem;
    letter-spacing: 2px;
    font-family: "IdeaFonts-DianHei-DEJ", "IdeaFonts-DianHei";
  }

  p[data-font="en"] {
    font-size: 0.48rem;
    font-family: "Helvetica";
    color: #68656c;
    line-height: 0.75rem;
    word-break: keep-all;
    word-wrap: break-word;
  }

  .demo {
    margin-top: 1.33rem;
    width: 32rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .image {
      width: 8rem;
      height: 5.33rem;
    }

    .succ-image {
      width: 8rem;
      height: 5.33rem;
      position: relative;

      .el-image {
        width: 100%;
        height: 100%;
      }

      .img-title {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%);
        font-size: 0.53rem;
        font-weight: normal;
        color: #68656c;
      }

      .img-title[data-font="zh"] {
        letter-spacing: 2px;
        line-height: 0.85rem;
        font-family: "IdeaFonts-DianHei-DEJ", "IdeaFonts-DianHei";
      }

      .img-title[data-font="en"] {
        font-size: 0.48rem;
        line-height: 0.75rem;
        font-family: "Helvetica";
        font-family: "Helvetica";
      }
    }

    .process {
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon-right {
        width: 0.56rem;
        height: 0.59rem;
      }

      span {
        font-size: 0.53rem;
        font-weight: normal;
        color: #7709cc;
        line-height: 0.85rem;
      }

      span[data-font="zh"] {
        font-family: "IdeaFonts-DianHei-DEJ", "IdeaFonts-DianHei";
      }

      span[data-font="en"] {
        font-family: "Helvetica";
      }
    }
  }
}

.application-btns {
  width: 32rem;
  padding: 1.28rem 0 1.28rem;
  text-align: center;

  .application-btn {
    width: 12.64rem;
    height: 1.6rem;
    background: linear-gradient(
      315deg,
      rgba(38, 87, 255, 0.75) 0%,
      rgba(159, 34, 255, 0.75) 100%
    );
    border-radius: 0.21rem;
    backdrop-filter: blur(10px);

    :deep(span) {
      font-size: 0.64rem;
      font-weight: normal;
      color: #ffffff;
      line-height: 0.96rem;
    }
  }

  .application-btn[data-font="zh"] {
    :deep(span) {
      font-family: "IdeaFonts-DianHei-CEJ", "IdeaFonts-DianHei";
    }
  }

  .application-btn[data-font="en"] {
    :deep(span) {
      font-family: "PingFangSC-Regular, PingFang SC";
    }
  }
}

.messages {
  width: 32rem;
  margin: 2.13rem auto 0;

  p {
    font-size: 0.59rem;
    color: #7709cc;
    line-height: 0.77rem;
  }

  p[data-font="zh"] {
    font-family: "IdeaFonts-DianHei-FEJ", "IdeaFonts-DianHei";
    font-weight: normal;
  }

  p[data-font="en"] {
    font-family: "Helvetica-Bold", "Helvetica";
    font-weight: bold;
    word-break: keep-all;
    word-wrap: break-word;
  }
}
</style>
